<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/wk3un4/houtai/lib/layui/css/layui.css" />
<script type="text/javascript" src="/wk3un4/houtai/lib/layui/layui.js"></script>
</head>

<body>
	<form class="layui-form" action="">

		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>图片地址:</label>
			<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<img id="imgFace" style="width:120px;" src="" />
			<input style="width: 350px;" type="hidden" id="imgUrl" name="imgUrl" class="layui-input">
		</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>商品列表ID:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<select name="productId">
					<c:forEach items="${product}" var="p">
						<option value="${p.id}">${p.name}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script>
		//加载layui的form模块
		layui.use(['form','upload'], function() {
			var form = layui.form;
			var $ = layui.jquery; //引入jquery
			var upload = layui.upload;
			//执行实例
			var uploadInst = upload.render({
				elem : '#test1' //绑定元素
				,
				url : '/wk3un4/PictureZsgServlet?method=upload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					console.log(res);
					$("#imgUrl").val('upload/'+res.data);
					$("#imgFace").attr('src','/wk3un4/upload/'+res.data);
				},
				error : function() {
					//请求异常回调
				}
			});
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//8ee9f6a8-d4a8-446e-930e-50af1528251c
				var d = data.field; //表单中的数据，定义一个参数来接收
				d.method = "add";//执行方法
				//通过ajax想数据库提交数据
				console.log(d); //提交之前的一个数据验证，通过打印的方式判断一下这个数据
				var url = '/wk3un4/PictureZsgServlet';
				//    				ajax请求
				$.post(url, d, function(data) {
					if (data.count > 0) {
						console.log('添加成功');
						var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
						parent.layer.close(index); //关闭窗口
					}
				}, "json");
				return false;
			});
		});
	</script>
</body>

</html>